{% extends 'data_grid.html' %}
{% load i18n static %}
{% block main_body %}
  <div class="layui-row layui-col-space15" style="margin-bottom: 0px">
    <div class="layui-col-md10">
      <table id="id_grid_{{ model_name }}" class="layui-hide" lay-filter="{{ model_name }}"></table>
      <script type="text/html" id="{{ model_name }}_toolbar">
        <div class="layui-btn-container grid-toolbar" style="">
          <ul class="layui-nav"></ul>
        </div>
      </script>
    </div>
    <div class="layui-col-md2">
      <div class="layui-card">
        <div class="layui-card-header"
             style="background-color: #e7e7e7">{% trans 'epTransaction.titles.capture' %}</div>
        <div class="layui-card-body">
          <div>
            <div style="padding: 5px" align="center">
              <img id="id_employeeCapture" class="transaction-capture" src='/media/images/userImage.gif'
                   onerror="this.src='/media/images/userImage.gif';" alt="">
            </div>
            <div>
              <table id="capture-detail" class="captureRowPanel">
                <tbody>
                <tr>
                  <th>{% trans 'epTransaction.fields.employeeCode' %}</th>
                  <td>
                    <div id="empCodePanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'epTransaction.fields.firstName' %}</th>
                  <td>
                    <div id="firstNamePanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'epTransaction.fields.lastName' %}</th>
                  <td>
                    <div id="lastNamePanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'epTransaction.fields.department' %}</th>
                  <td>
                    <div id="departmentPanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'epTransaction.fields.position' %}</th>
                  <td>
                    <div id="positionPanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'epTransaction.fields.checkDate' %}</th>
                  <td>
                    <div id="punchDatePanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'epTransaction.fields.checkTime' %}</th>
                  <td>
                    <div id="punchTimePanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'epTransaction.fields.temperature' %}</th>
                  <td>
                    <div id="temperaturePanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'epTransaction.fields.isMask' %}</th>
                  <td>
                    <div id="maskPanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'epTransaction.fields.area' %}</th>
                  <td>
                    <div id="areaPanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'epTransaction.fields.deviceSN' %}</th>
                  <td>
                    <div id="terminalSNPanel">-</div>
                  </td>
                </tr>
                <tr>
                  <th>{% trans 'epTransaction.fields.uploadTime' %}</th>
                  <td>
                    <div id="uploadTimePanel">-</div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block grid_opt_update %}
  var cols = res['grid_opts']['cols'][0];
  var payload = {};
  cols.forEach(function(col, index){
    payload[col.field] = col;
  });
  $.extend(payload.employee_last_name, {hide: true});
  $.extend(payload.employee_position, {hide: true});
  $.extend(payload.temperature, {templet: function(obj){
      if(!obj.temperature || parseInt(obj.temperature) === 255){
        return ""
      }
      if(obj.temperature && obj.temperature > {{temp_warning}}){
          return '<span style="color: #DC143C;">'+ obj.temperature + ' {{ temp_unit }}' +'</span>'
      }else{
          return '<span>'+ obj.temperature + ' {{ temp_unit }}' +'</span>'
      }
  }});
{% endblock %}
{% block actionAfterTableRender %}
  layui.use(['table', 'form'], function(){
    var table = layui.table, form=layui.form;
    form.render();
    setTimeout(function () {
    table.on('row({{ model_name }})', function(obj){
      var data = obj.data;
      var dd = data.check_date;
      var dt = data.check_time;
      $("#empCodePanel").html(data.employee_code);
      $("#firstNamePanel").html(data.employee_first_name);
      $("#lastNamePanel").html(data.employee_last_name);
      $("#departmentPanel").html(data.employee_department);
      $("#positionPanel").html(data.employee_position);
      $("#punchDatePanel").html(data.check_date);
      $("#punchTimePanel").html(data.check_time);
      $("#temperaturePanel").html(data.temperature + ' {{ temp_unit }}');
      $("#maskPanel").html(data.is_mask);
      $("#areaPanel").html(data.area);
      $("#terminalSNPanel").html(data.device_sn);
      $("#uploadTimePanel").html(data.upload_time);

      if(data.device_sn == undefined){
        return false;
      }
      if(data.employee_code == "" || data.employee_code == undefined || data.employee_code == null){
        var emp_code_jpg = "0";
      }else{
        var emp_code_jpg = data.employee_code;
      }
      var dtStr = dd.replace(/-/g, '') + dt.replace(/:/g, '');
      var url = "/files/upload/" + dd.replace(/-/g, '').substring(0, 6) + "/" + data.device_sn.replace(/:/g, "-") + "/" +
      dtStr + "-" + emp_code_jpg +".jpg";
      $("#id_employeeCapture").attr('src', url);
      });
    }, 500);
  })
{% endblock %}